﻿@model ZSZ.QianWeb.Models.House.IndexGetModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/shard/_layout.cshtml";
}
@section headerjs{
    <link rel="stylesheet" type="text/css" href="~/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="~/css/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="~/css/app.css" />
}
<div class="headertwo clearfloat" id="header">
    <a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl"></i></a>
    <p class="fl">房源详情</p>
    <a href="#" class="fr" onClick="toshare()"><i class="iconfont icon-fenxiang fl"></i></a>
</div>

<!--分享内容-->
<div class="am-share">
    <h3 class="am-share-title">分享到</h3>
    <ul class="am-share-sns">
        <li><a href="#"> <i class="iconfont icon-weixin weixin"></i> <span>微信</span> </a> </li>
        <li><a href="#"> <i class="iconfont icon-qq qq"></i> <span>QQ</span> </a> </li>
        <li><a href="#"> <i class="iconfont icon-weibo weibo"></i> <span>微博</span> </a> </li>
        <li><a href="#"> <i class="iconfont icon-renrenwang renren"></i> <span>人人</span> </a> </li>
    </ul>
    <div class="am-share-footer"><button class="share_btn">取消</button></div>
</div>

<div class="clearfloat" id="main">
    <div class="service clearfloat">
        <div class="slider one-time">
            @foreach (var item in Model.HousePics)
            {
                <div>
                    <img src="@item.ThumbUrl" />
                    <div class="tit clearfloat box-s">
                        <p class="two">@Model.House.Address</p>
                    </div>
                </div>
            }
        </div>
    </div>

    <div class="service-top clearfloat box-s">
        <div class="left fl clearfloat box-s">
            <p class="tit titwo">@Model.House.MonthRent<span>元/月</span></p>
            <p class="fu-tit">@Model.House.RoomTypeName   |  @(Model.House.Area)m²  |  @Model.House.DecorateStatusName | @Model.House.TypeId</p>
        </div>
        <div class="right fl clearfloat">
            <i class="iconfont icon-shoucang"></i>
            <p>收藏</p>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>房屋信息</p>
        </div>
        <div class="service-list clearfloat box-s">
            <ul>
                <li>类型：@Model.House.TtypeName</li>
                <li>朝向：@Model.House.CommunityName</li>
                <li>楼层：@Model.House.Address </li>
                <li>装修：@Model.House.DecorateStatusName</li>
                <li>现状：空闲</li>
                <li>可入驻：@Model.House.CheckInDateTime</li>
                <li>建造年代：@Model.House.CommunityBuiltYear</li>
                <li>可看房：@(Model.House.LookableDateTime)以后</li>
            </ul>
            <p class="service-tit">交通：公交8路、111、124、136、156</p>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>配置设施</p>
        </div>
        <div class="service-ties clearfloat box-s">
            <ul>
                @foreach (var item in Model.Attachments)
                {
                    <li><i class="iconfont @item.IconName"></i>@item.Name</li>
                }
            </ul>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>房源描述</p>
        </div>
        <p class="tit box-s">
            @Model.House.Description
        </p>
    </div>



</div>

<div class="footer-look clearfloat" id="footer">
    <a href="#loginmodal" id="modaltrigger">我要看房</a>
</div>


<!--弹窗内容 star-->
<div id="loginmodal" class="box-s loginmodal" style="display:none;">
    <form id="loginform" name="loginform" method="post" action="">
        <div class="center"><input type="button" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="" tabindex="3"></div>
    </form>
    <div class="top clearfloat box-s">
        填写信息
    </div>
    <div class="bottom clearfloat box-s">
        <ul>
            <li class="clearfloat">
                <i class="iconfont icon-user"></i>
                <input type="text" name="" id="name" value="" placeholder="您的姓名" />
            </li>
            <li class="clearfloat">
                <i class="iconfont icon-phone"></i>
                <input type="text" name="" id="phone" value="" placeholder="您的手机号码" />
            </li>
            <li class="clearfloat">
                <i class="iconfont icon-calendar"></i>
                <input type="text" name="" id="lookdate" placeholder="请选择看房时间" />
            </li>
        </ul>
        <input type="button" name="" id="btnYuYue" value="立即预约" class="btn" />
    </div>
</div>
<!--弹窗内容 end-->
@section footerjs{
    <script type="text/javascript" src="~/slick/slick.min.js"></script>
    <script src="~/js/jquery.leanModal.min.js"></script>
    <script src="~/js/mui.picker.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#modaltrigger').leanModal({
                top: 110,
                overlay: 0.45,
                closeButton: ".hidemodal"
            });

            $(function () {
                $('#btnYuYue').click(function () {
                    var houseId = @Model.House.Id;
                    var name = $('#name').val();
                    var phone = $('#phone').val();
                    var lookdate = $('#lookdate').val();
                    $.ajax({
                        url: '/House/YuYue',
                        type: 'post',
                        dataType: 'json',
                        data: { houseId: houseId, name: name, phone: phone, lookDate: lookdate },
                        success: function (res) {
                            if (res.status == 'ok') {
                                $("#lean_overlay").fadeOut(200);
                                $('#loginmodal').css({ "display": "none" })
                            } else {
                                alert(res.errorMsg);
                            }
                        },
                        error: function () {
                            alert('网络请求错误');
                        }
                    })
                })

                $('#lookdate').click(function () {
                    var picker = new mui.DtPicker({ type: 'date' });
                    picker.show(function (rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        //result.innerText = '选择结果: ' + rs.text;
                        $('#lookdate').val(rs.y.value + '-' + rs.m.value + '-' + rs.d.value);
                        /*
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                    });
                });
            })
        })
    </script>
}